import { usePlanApi } from './usePlanApi';
import { usePlanBaseApi } from './usePlanBaseApi';
import {ref} from 'vue'
export const shareComponent = (Variable, emit) => {
  const {
    selectHelper,
    showShareDetil,
    $q,
    shareDetile,
    showShare,
    sharePlan,
    mappingProps
  } = Variable;
  const { shareToOther } = usePlanApi(Variable, emit);
  const { preventDefault } = usePlanBaseApi(Variable, emit);
  const shareList = ref([])
  const shareDetilComponent = () => {
    return (
      <tm-dialog
        v-model:show={showShareDetil.value}
        onHide={() => {
          showShareDetil.value = false;
        }}
        onShow={() => {
          showShareDetil.value = true;
        }}
        class='shareDteail'
      >
        <t-card style='width: 420px;'>
          <t-card-section
            class='row items-center q-pb-none tr-card-header'
            style='display:flex'
          >
            <div class='plan_dialog_header_title'>
              {$q.lang.queryPlan.dialog.shareDetile}
            </div>
            <t-space />
            <t-icon
              name='close'
              onClick={() => {
                showShareDetil.value = false;
              }}
              style='font-size:14px'
            />
          </t-card-section>
          {(() => {
            if (shareDetile.value.SharedBy) {
              return (
                <t-card-section class='tr-card-content'>
                  <t-chips
                    label={$q.lang.queryPlan.dialog.shareBy}
                    readonly={true}
                    labelPosition='top'
                    modelValue={(() => {
                      return [{ TagName: shareDetile.value.SharedBy }];
                    })()}
                  ></t-chips>
                </t-card-section>
              );
            }
          })()}
          {(() => {
            if (shareDetile.value.ShareUsers) {
              return (
                <t-card-section class='tr-card-content'>
                  <t-chips
                    label={$q.lang.queryPlan.dialog.shareTo}
                    labelPosition='top'
                    readonly={true}
                    modelValue={(() => {
                      return shareDetile.value.ShareUsers.map(item => {
                        return { TagName: item.UserName || item.RealName };
                      });
                    })()}
                  ></t-chips>
                </t-card-section>
              );
            }
          })()}

          <t-card-actions
            align='right'
            class='bg-white text-teal'
            style='padding:12px 24px 16px 24px'
          >
            <t-button
              class='tr-button-primary'
              style='padding:8px 6px'
              tabIndex='0'
              onClick={async () => {
                showShareDetil.value = false;
              }}
              onkeydown={e => {
                preventDefault(e);
              }}
            >
              {$q.lang.queryPlan.dialog.know}
            </t-button>
          </t-card-actions>
        </t-card>
      </tm-dialog>
    );
  };
  const shareComponent = () => {
    return (
      <tm-dialog
        v-model:show={showShare.value}
        onHide={() => {
          showShare.value = false;
        }}
        onShow={() => {
          showShare.value = true;
        }}
      >
        <t-card style='width: 420px;'>
          <t-card-section
            class='row items-center q-pb-none tr-card-header'
            style='display:flex'
          >
            <div class='plan_dialog_header_title'>
              {$q.lang.queryPlan.dialog.share}
            </div>
            <t-space />
            <t-icon
              name='close'
              onClick={() => {
                showShare.value = false;
              }}
              style='font-size:14px'
            />
          </t-card-section>

          <t-card-section class='tr-card-content'>
            <t-input
              class='query_plan_target_focuse_dom'
              tabIndex='0'
              labelPosition='top'
              v-model={sharePlan.value.Name}
              class='tr-input-default'
              readonly
              borderType='borderless'
              label={$q.lang.queryPlan.dialog.planName}
            />
            <select-helper
              labelPosition='top'
              style='margin-top:24px'
              openType='right'
              label={$q.lang.queryPlan.dialog.choiseShare}
              placeholder={$q.lang.queryPlan.dialog.choiseShare}
              columns={[
                {
                  isShow: true,
                  ID: 'RealName',
                  dataField: 'RealName',
                  caption: $q.lang.queryPlan.dialog.userName,
                },
                {
                  isShow: true,
                  ID: 'DepartmentName',
                  dataField: 'DepartmentName',
                  caption: $q.lang.queryPlan.dialog.department,
                },
              ]}
              pagination={true}
              multiple={true}
              labelField='RealName'
              valueField='UserID'
              historyEnable={true}
              historySaveCount='5'
              iconEnable={true}
              iconFiled='Avatar'
              value={(() => {
                let shareUsers = JSON.parse(
                  JSON.stringify(sharePlan.value),
                ).ShareUsers;
                shareUsers
                  ? (shareUsers = shareUsers.map(item => {
                      return {
                        RealName: item.UserName || item.RealName,
                        UserID: item.UserID,
                      };
                    }))
                  : [];
                return shareUsers;
              })()}
              search={async (pageIndex, val, Filter) => {
                let rows = [];
                let total;
                if (window.TFF) {
                  const data = await TFF.common.ajax.getDataAsync({
                    url: `${TFF.common.ajax.getServiceUrl(
                      'SYS_CommonHelper_GetUserList',
                    )}`,
                    type: 'post',
                    data: {
                      filter: JSON.stringify({
                        FieldName: 'RealName',
                        FieldValue: Filter,
                        FilterKey: {
                          Data_FunctionID:
                            'DF686BBF-2387-4259-886B-249022156A8A',
                          Enabled: 1,
                          FilterByPeakOrgID: "fb247fb4-13d1-4c1b-acf8-27278b9bd0b1", //限定特来电内部用户
                          NoDataAuth: 'true',
                        },
                        page: pageIndex,
                        rows: val ? val : 10,
                      }),
                    },
                  });
                  rows = data.rows;
                  total = data.total;
                }
                return {
                  List: rows,
                  Count: total,
                };
              }}
              onConfirm={row => {
                if (
                  row.some(item => Session && item.UserID == Session.UserId)
                ) {
                  Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.shareWarning,
                    'warning',
                  );
                  row = row.filter(item => item.UserID != Session.UserId);
                  shareList.value = row;
                } else {
                  shareList.value = row;

                }
              }}
              ref={selectHelper}
            ></select-helper>
          </t-card-section>

          <t-card-actions
            align='right'
            class='bg-white text-teal'
            style='padding:12px 24px 16px 24px'
          >
            <t-button
              class='submit tr-button-text'
              style='color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));border:1px solid #DCDCDC;padding:8px 6px'
              onClick={() => {
                showShare.value = false;
              }}
              ripple={false}
              tabIndex='0'
            >
              {$q.lang.label.cancel}
            </t-button>
            <t-button
              class='tr-button-primary'
              style='padding:8px 6px'
              tabIndex='0'
              onClick={async () => {
                sharePlan.value.ShareUsers =shareList.value
                shareToOther(sharePlan.value.ShareUsers, sharePlan.value);
              }}
              onkeydown={e => {
                preventDefault(e);
              }}
            >
              {$q.lang.label.ok}
            </t-button>
          </t-card-actions>
        </t-card>
      </tm-dialog>
    );
  };
  const  shareDetilComponentMobile = () => {
    return (
      <tm-dialog
        class='select_helper_popup_m'
        v-model:show={showShareDetil.value}
        onHide={() => {
          showShareDetil.value = false;
        }}
        onShow={() => {
          showShareDetil.value = true;
        }}
        position='right'
        // 如果设置为false 组件限制无法全屏
        maximized={true}
      >
        <t-card
          style='width: 100vw;    background: #fff;height:100vh !important'
          class='queryplanContent_m'
        >
          <header>
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
              onClick={() => {
                showShareDetil.value = false;
              }}
            ></i>
            <span>{$q.lang.queryPlan.dialog.share}</span>
            <span
              class='submit'
              onClick={async () => {
                showShareDetil.value = false;
              }}
            >
              {$q.lang.queryPlan.dialog.know}
            </span>
          </header>
          {(() => {
            if (shareDetile.value.SharedBy) {
              return (
                <t-card-section class='tr-card-content'>
                  <t-chips
                    label={$q.lang.queryPlan.dialog.shareBy}
                    readonly={true}
                    labelPosition='top'
                    modelValue={(() => {
                      return [{ TagName: shareDetile.value.SharedBy }];
                    })()}
                  ></t-chips>
                </t-card-section>
              );
            }
          })()}
          {(() => {
            if (shareDetile.value.ShareUsers) {
              return (
                <t-card-section class='tr-card-content'>
                  <t-chips
                    label={$q.lang.queryPlan.dialog.shareTo}
                    labelPosition='top'
                    readonly={true}
                    modelValue={(() => {
                      return shareDetile.value.ShareUsers.map(item => {
                        return { TagName: item.UserName || item.RealName };
                      });
                    })()}
                  ></t-chips>
                </t-card-section>
              );
            }
          })()}
        </t-card>
      </tm-dialog>
    );
  };
  const shareComponentMobile = () => {
    return (
      <tm-dialog
        class='select_helper_popup_m'
        v-model:show={showShare.value}
        onHide={() => {
          showShare.value = false;
        }}
        onShow={() => {
          showShare.value = true;
        }}
        position='right'
        // 如果设置为false 组件限制无法全屏
        maximized={true}
      >
        <t-card
          style='width: 100vw;    background: #fff;height:100vh !important'
          class='queryplanContent_m'
        >
          <header>
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowLeft??'icon-t-arrow-left'}`}
              onClick={() => {
                showShare.value = false;
              }}
            ></i>
            <span>{$q.lang.queryPlan.dialog.share}</span>
            <span
              class='submit'
              onClick={async () => {
                sharePlan.value.ShareUsers = shareList.value;
                shareToOther(sharePlan.value.ShareUsers, sharePlan.value);
              }}
            >
              {$q.lang.label.ok}
            </span>
          </header>

          <t-card-section class='tr-card-content'>
            <t-input
              class='query_plan_target_focuse_dom'
              tabIndex='0'
              labelPosition='top'
              v-model={sharePlan.value.Name}
              class='tr-input-default'
              readonly
              borderType='borderless'
              label={$q.lang.queryPlan.dialog.planName}
            />
            <select-helper
              labelPosition='top'
              style='margin-top:24px'
              openType='right'
              label={$q.lang.queryPlan.dialog.choiseShare}
              placeholder={$q.lang.queryPlan.dialog.choiseShare}
              columns={[
                {
                  isShow: true,
                  ID: 'RealName',
                  dataField: 'RealName',
                  caption: $q.lang.queryPlan.dialog.userName,
                },
                {
                  isShow: true,
                  ID: 'DepartmentName',
                  dataField: 'DepartmentName',
                  caption: $q.lang.queryPlan.dialog.department,
                },
              ]}
              pagination={true}
              multiple={true}
              labelField='RealName'
              valueField='UserID'
              historyEnable={true}
              historySaveCount='5'
              iconEnable={true}
              iconFiled='Avatar'
              value={(() => {
                let shareUsers = JSON.parse(
                  JSON.stringify(sharePlan.value),
                ).ShareUsers;
                shareUsers
                  ? (shareUsers = shareUsers.map(item => {
                      return {
                        RealName: item.UserName || item.RealName,
                        UserID: item.UserID,
                      };
                    }))
                  : [];
                return shareUsers;
              })()}
              search={async (pageIndex, val, Filter) => {
                let rows = [];
                let total;
                if (window.TFF) {
                  const data = await TFF.common.ajax.getDataAsync({
                    url: `${TFF.common.ajax.getServiceUrl(
                      'SYS_CommonHelper_GetUserList',
                    )}`,
                    type: 'post',
                    data: {
                      filter: JSON.stringify({
                        FieldName: 'RealName',
                        FieldValue: Filter,
                        FilterKey: {
                          Data_FunctionID:
                            'DF686BBF-2387-4259-886B-249022156A8A',
                          Enabled: 1,
                          FilterByPeakOrgID:
                            'fb247fb4-13d1-4c1b-acf8-27278b9bd0b1',
                          NoDataAuth: 'true',
                        },
                        page: pageIndex,
                        rows: val ? val : 10,
                      }),
                    },
                  });
                  rows = data.rows;
                  total = data.total;
                }
                return {
                  List: rows,
                  Count: total,
                };
              }}
              onConfirm={row => {
                if (
                  row.some(item => Session && item.UserID == Session.UserId)
                ) {
                  Funcs.Notify(
                    $q.lang.selectHelper.warning,
                    $q.lang.queryPlan.dialog.shareWarning,
                    'warning',
                  );
                  row = row.filter(item => item.UserID != Session.UserId);
                  shareList.value = row;
                } else {
                  shareList.value = row;
                }
              }}
              ref={selectHelper}
            ></select-helper>
          </t-card-section>
        </t-card>
      </tm-dialog>
    );
  };
  return {

    shareDetilComponent: ($q.screen.xs || $q.platform.is.mobile) && mappingProps.planType == '1'
    ? shareDetilComponentMobile
    : shareDetilComponent,
    shareComponent:($q.screen.xs || $q.platform.is.mobile) && mappingProps.planType == '1'
    ? shareComponentMobile
    : shareComponent,
  };
};
